| 五分钟学会各种环形进度条 | 您所在的位置：网站首页 › js 圆形进度条 › 五分钟学会各种环形进度条 |
五分钟学会各种环形进度条
|
本文将会通过svg实现圆形进度条和矩形进度条以及三角形进度条，先放效果图 首先我们需要两个画两个圆，一个是底色圆，一个是进度圆。 现在就画好了两个圆，绘制进度圆的重点就是d属性值 ，M代表起点，A代表画椭圆弧，一次最多只能画半圆，所以要分两次，下面是具体画圆路径的参数解释 命令参数-参数解释Arx, ry x-axis-rotation, large-arc-flag, sweepflag x, y从当前画笔位置开始绘制一条椭圆弧线到（x,y）指定的坐标。rx和ry分别为X轴和Y轴的半径。x-axis-rotation为x轴旋转度数。large-arc-flag代表优弧还是劣弧（0表示劣弧，1表示优弧）。sweep-flag为弧线方向 0为顺时针 1为逆时针Mx,y移动虚拟画笔到指定的（x,y）坐标，仅移动不绘制既然圆画出来了，怎么让进度圆动起来？ 这个时候就有比较重要的两个属性 stroke-dasharray和stroke-dashoffset 关于这两个属性详细解释可以看这个大佬写的链接 stroke-dasharraystroke-dasharray属性用于创建虚线，就是设置实线和虚线的宽度 比如：stroke-dasharray: 50 20; 效果就是下图 stroke-dasharray 当属性为两个值时，一个表示长度，一个表示间距 这个时候我们可以利用这个属性来实现进度，首先我们需要知道这个圆的周长，然后就可以通过百分比 * 周长去得到相应百分比需要绘制的长度。 周长 = 2* Π * r 这个公式大家都会吧，以示例为准，周长 = 2 * Math.PI * 50，我们将其进度变为25% const girth = 2 * Math.PI * 50 const dasharray = `${0.25 * girth} ${girth}` const d = M 100, 50 A 50, 50, 0, 0, 1, 100, 150 A 50, 50, 0, 0, 1, 100, 50这样就实现了一个进度为25%的圆环进度条 矩形进度条老规矩，先画两个矩形，rx代表矩形的圆角，矩形进度条的重点是在周长的计算，以示例为准，因为矩形是带圆角的，所以就不是 2 * (长 + 宽) ，而是需要加上圆角的长度 矩形的四个圆角拼起来其实就是一个圆，半径就是 rx 可以得出周长 = 2 * Math.PI * rx + 4 * (正方形的边长 - 2 * rx) 接下来还是用dasharray属性来实现进度 const circleGirth = 2 * Math.PI * 100 // 圆角的圆的周长 const width = 100 - 2 * 10 // 正方形的边长 const girth = circleGirth + 4 * width // 圆角矩形总周长 const dasharray = `${0.25 * girth} ${girth}`圆环进度条会了，矩形不是信手拈来 三角形进度条三角形进度条是用 polygon 来实现，其中 stroke-linejoin 属性是可以设置圆角，在计算周长的时候就不需要计算圆角，会比较方便，points属性就是三角形三个角的坐标，所以绘制的重点是这三个角的坐标 接下来我们来计算ABC三个角的坐标 以边长100为例，先求三角形的高，因为等边三角形三线合一，高既是底边的中线，也是底边的高线，再根据勾股定理 得出 高² = 边长² - 底边² 即 高 = Math.sqrt(Math.pow(100, 2) - Math.pow(50, 2))所以 A点的坐标(0, 高)，B点的坐标(50, 0)，C点的坐标(100, 高) const height = Math.sqrt(Math.pow(100, 2) - Math.pow(50, 2)) // 高 const points = `0,${height} 50,0 100,${height}`当我们将相应的值带进去的时候，发现有部分被遮挡，其实是因为我们设置了 stroke-width,所以我们只需要将ABC三点的xy坐标都加10就行了 const height = Math.sqrt(Math.pow(100, 2) - Math.pow(50, 2)) // 高 const points = `10,${height + 10} 60,10 110,${height + 10}`三角形实现了，现在只需要计算周长，就可以实现进度百分比，周长 = 3 * 边长,现在以33%为例实现代码 const height = Math.sqrt(Math.pow(100, 2) - Math.pow(50, 2)) // 高 const points = `10,${height + 10} 60,10 110,${height + 10}` const dasharray = 100 300其中的stroke-linecap属性是设置进度条的进度圆角 这样我们就简单的实现了三种不一样的进度条
|
【本文地址】